<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="Saltarelle" %>
<%@ Import Namespace="Saltarelle.UI" %>
<%@ Import Namespace="Saltarelle.Mvc" %>
<%@ Import Namespace="DemoWeb" %>
<%@ Import Namespace="System.Globalization" %>
<script runat="server">
private DragDropTestControl[] controls;

private const int NumControls = 4;

protected override void OnLoad(EventArgs e) {
	controls = new DragDropTestControl[NumControls];
	for (int i = 0; i < controls.Length; i++) {
		controls[i] = new DragDropTestControl();
		controls[i].Id = "control" + i.ToString(CultureInfo.InvariantCulture);
		controls[i].NumItems = 40;
	}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>DragDrop Tests</title>
	<link rel="Stylesheet" href="/Content/themes/base/ui.all.css" type="text/css"/>
	<link rel="Stylesheet" href="/Content/site.css" type="text/css"/>
	<link rel="Stylesheet" href="/Stylesheet" type="text/css"/>
<% Html.Scripts(); %>
<style type="text/css">
.MessageLog span {
	display: block;
}
</style>
<script type="text/javascript" language="javascript">
var dobreak = true; // Not currently used
//if (dobreak) debugger;

function logEvent(ctl, msg) {
	var events = $('#events');
	$('<div/>').text(ctl.get_id() + ': ' + msg).appendTo(events);
	events.scrollTop(100000);
}

function handleDragStarted(s, e) {
	logEvent(s, 'DragStarted, data = ' + e.data);
}

function handleDragDropCancelled(s, e) {
	logEvent(s, 'DragDropCancelled, data = ' + e.data);
}

function handleQueryDrop(s, e) {
	logEvent(s, 'QueryDrop, sourceData = ' + e.sourceData + ', target = ' + e.target.get_id() + ', targetData = ' + e.targetData);
	e.allow = $('#sourceallows').is(':checked');
}

function handleDragDropCompleted(s, e) {
	logEvent(s, 'DragDropCompleted, sourceData = ' + e.sourceData + ', target = ' + e.target.get_id() + ', targetData = ' + e.targetData);
}

function handleDragEnter(s, e) {
	logEvent(s, 'DragEnter, source = ' + e.source.get_id() + ', sourceData = ' + e.sourceData);
}

function handleDragLeave(s, e) {
	logEvent(s, 'DragLeave, source = ' + e.source.get_id() + ', sourceData = ' + e.sourceData);
}

function handleDrop(s, e) {
	logEvent(s, 'Drop, source = ' + e.source.get_id() + ', sourceData = ' + e.sourceData + ', targetData = ' + e.targetData + ', pos = (' + e.cursorPos.left + ', ' + e.cursorPos.top + ')');
}

function handleDragOver(s, e) {
	logEvent(s, 'DragOver, source = ' + e.source.get_id() + ', data = ' + e.sourceData + ', pos = (' + e.cursorPos.left + ', ' + e.cursorPos.top + ')');
	e.targetData = $('#targetallows').is(':checked') ? 'x' : null;
}

var controls;
function init() {
	var cfg = <%= Utils.InitScript(controls.Select(c => c.ConfigObject)) %>;
	controls = new Array(cfg.length);

	for (var i = 0; i < controls.length; i++) {
		var c = new DemoWeb.DragDropTestControl(cfg[i]);
		c.add_handleDragDropStarted(handleDragDropStarted);
		c.add_handleDragDropCancelled(handleDragDropCancelled);
		c.add_handleQueryDrop(handleQueryDrop);
		c.add_handleDragDropCompleted(handleDragDropCompleted);
		c.add_handleDragEnter(handleDragEnter);
		c.add_handleDragLeave(handleDragLeave);
		c.add_handleDrop(handleDrop);
		c.add_handleDragOver(handleDragOver);

		controls[i] = c;
	}
	
	$('#evalScriptButton').click(function() {
		eval($('#scriptInput').val());
	});
	
	$('#clearEventsButton').click(function() {
		$('#events').html('');
	});
}
</script>
</head>

<body style="margin: 20px">
	<table>
		<tr>
			<td>
				<%= controls[0].Html %>
			</td>
			<td>
				<%= controls[1].Html %>
			</td>
			<td rowspan="2">
				<div>
					<input type="text" style="width: 300px" id="scriptInput"/><button type="button" id="evalScriptButton">Eval</button>
				</div>
				<button type="button" id="clearEventsButton">Clear</button>
				<div style="width: 600px; height: 600px; overflow: scroll" id="events">
				</div>
			</td>
		</tr>
		<tr>
			<td>
				<%= controls[2].Html %>
			</td>
			<td>
				<%= controls[3].Html %>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="checkbox" id="targetallows" checked="checked" /><label for="targetallows" style="margin-right: 20px">Target allows drop</label>
				<input type="checkbox" id="sourceallows" checked="checked" /><label for="sourceallows">Source allows drop</label>
			</td>
		</tr>
	</table>
</body>
</html>
